<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/node_modules/layui/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            /* 设置背景图片 */
            background-image: url('/img/bg-login.jpg');
            /* 设置背景大小和重复方式 */
            background-size: cover; /* 让背景图片覆盖整个容器 */
            background-repeat: no-repeat; /* 不重复显示背景图片 */
            /* 可选的背景位置 */
            /* background-position: center; */ /* 如果要居中显示 */
        }
    </style>
</head>
<body>
<style>
    .demo-login-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .demo-login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .form-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 30px; /* 添加一些内边距 */
        border-radius: 10px; /* 添加圆角 */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 添加阴影效果 */
        background-color: rgba(255, 255, 255, 0.65);
        max-width: 400px; /* 设置最大宽度 */
        margin: 0 auto; /* 水平居中 */
    }
</style>

<div class="form-container">
    <form class="layui-form" th:action="@{/login}" method="post">
        <div class="demo-login-container">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="admin" lay-verify="required" placeholder="用户名"
                           lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="password" value="password" lay-verify="required" placeholder="密   码"
                           lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
            </div>
        </div>
    </form>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/node_modules/layui/dist/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            form = layui.form;

        // 检测是否有错误信息
        var errorParam = new URLSearchParams(window.location.search).get('error');
        console.log('errorParam:', errorParam);
        if (errorParam !== null) {
            layer.alert('错误的用户名和密码.', {icon: 2});
        }

        // 监听提交
        form.on('submit(demo-login)', function(data) {
            // 可以在这里添加其他表单提交前的处理
            return true; // 返回 true 表示继续提交表单
        });
    });
</script>

</body>
</html>
